<template>
  <div class="position-tooltip" v-show="visible">
    <div class="feature-container">
      <div class="content-scroll">
        <template v-for="(region, regionIndex) in regionList" :key="regionIndex">
          <div class="title">{{ region.name }}</div>
          <div class="feature-box-feature">
            <div :class="{
                'province-item': true,
                active: item.checked,
              }" v-for="(item, itemIndex) in region.children" :key="itemIndex" @click="chooseProvince(item, region)">
              {{ item.name }}
            </div>
          </div>
        </template>
      </div>

      <div class="bottom-btn">
        <div class="left-btn" @click="clear">
          清除已选
        </div>
        <div class="right-btn" @click="confirm">确 定</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const emit = defineEmits(["confirmPosition", "close"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
});

const regionList = ref([
  {
    name: "华北",
    children: [
      {
        name: "河北",
        value: "130000",
        checked: false,
      },
      {
        name: "山西",
        value: "140000",
        checked: false,
      },
      {
        name: "北京",
        value: "110000",
        checked: false,
      },
      {
        name: "天津",
        value: "120000",
        checked: false,
      },
      {
        name: "内蒙古",
        value: "150000",
        checked: false,
      },
    ],
  },
  {
    name: "东北",
    children: [
      {
        name: "辽宁",
        value: "210000",
        checked: false,
      },
      {
        name: "吉林",
        value: "220000",
        checked: false,
      },
      {
        name: "黑龙江",
        value: "230000",
        checked: false,
      },
    ],
  },
  {
    name: "华东",
    children: [
      {
        name: "上海",
        value: "310000",
        checked: false,
      },
      {
        name: "江苏",
        value: "320000",
        checked: false,
      },
      { name: "浙江", value: "330000", checked: false },
      { name: "安徽", value: "340000", checked: false },
      { name: "福建", value: "350000", checked: false },
      { name: "江西", value: "360000", checked: false },
      { name: "山东", value: "370000", checked: false },
    ],
  },
  {
    name: "华中",
    children: [
      { name: "河南", value: "410000", checked: false },
      { name: "湖北", value: "420000", checked: false },
      { name: "湖南", value: "430000", checked: false },
    ],
  },
  {
    name: "华南",
    children: [
      { name: "广东", value: "440000", checked: false },
      { name: "海南", value: "460000", checked: false },
      { name: "广西", value: "450000", checked: false },
    ],
  },
  {
    name: "西南",
    children: [
      { name: "四川", value: "510000", checked: false },
      { name: "贵州", value: "520000", checked: false },
      { name: "云南", value: "530000", checked: false },
      { name: "重庆", value: "500000", checked: false },
      { name: "西藏", value: "540000", checked: false },
    ],
  },
  {
    name: "西北",
    children: [
      { name: "陕西", value: "610000", checked: false },
      { name: "甘肃", value: "620000", checked: false },
      { name: "青海", value: "630000", checked: false },
      { name: "宁夏", value: "640000", checked: false },
      { name: "新疆", value: "650000", checked: false },
    ],
  },
]);

const selectedProvince = ref(null);

const chooseProvince = (item, region) => {
  // 清除所有省份的选中状态
  regionList.value.forEach((region) => {
    region.children.forEach((province) => {
      province.checked = false;
    });
  });

  // 选中当前省份
  item.checked = true;
  selectedProvince.value = {
    name: item.name,
    value: item.value,
    region: region.name,
  };
};

const clear = () => {
  // 重置为默认状态
  regionList.value.forEach((region) => {
    region.children.forEach((province) => {
      province.checked = false;
    });
  });
  selectedProvince.value = null;
};

const confirm = () => {
  const result = {
    province: selectedProvince.value,
    // 构建与原来 cascader 兼容的数据结构
    value: selectedProvince.value ? [selectedProvince.value.value] : [],
  };
  emit("confirmPosition", result);
  emit("close");
};
</script>

<style scoped lang="scss">
.position-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 110px;
  z-index: 1000;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 28px 6px rgba(90, 122, 162, 0.3);
  border: 1px solid #e4e7ed;
  width: 800px;
  max-height: 600px;
  overflow: hidden;
}

.feature-container {
  .content-scroll {
    height: 344px;
    overflow-y: auto;
    padding: 6px 16px 150px 32px;
    .title {
      padding: 32px 0 24px 0;
      display: flex;
      align-items: flex-end;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 28px;
      color: #222222;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      span {
        font-size: 22px;
        color: #999999;
      }
    }
    .feature-box-feature {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 25px 0;
      .province-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-family: "PingFang-SC, PingFang-SC";
        font-size: 28px;
        padding: 12px 20px;
        color: #333333;
        background: #f8f8f8;
        border: #ffffff 1px solid;
        border: transparent 3px solid;
        cursor: pointer;
        transition: all 0.3s ease;
        &.active {
          background: #e5edff;
          border: #0b6eff 3px solid;
          color: #0b6eff;
          font-weight: bold;
        }
      }
    }
  }
  .bottom-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: #ffffff;
    box-shadow: 0px -2px 4px 0px rgba(188, 188, 188, 0.5);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    z-index: 2;

    .left-btn,
    .right-btn {
      flex-shrink: 0;
      width: 296px;
      height: 60px;
      border-radius: 12px;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 24px;
      color: #999999;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .left-btn {
      background: #c1c1c1;
      color: #ffffff;
    }
    .right-btn {
      color: #ffffff;
      background: #0b6eff;
    }
  }
}
</style> 